@charset "utf-8";
//@import "reset";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
    height: 100%;
}

.web {
    background: url(../img/1.png) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: relative;
    header {
        width: r(255);
        height: r(88);
        //margin: r(23) 0 0 r(20);
        .icon_img1 {
            padding: r(23) 0 0 r(20);
        }
    }
    section {
        .star {
            width: r(123);
            height: r(116);
            top: r(88);
            left: r(255);
            position: absolute;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .tree {
            padding-top: r(94);
            width: r(320);
            height: r(589);
            margin: 0 auto;
        }
        .colour {
            //          background: url(../img/5.png)  no-repeat;
            //          background-size: 100%;
            width: r(554);
            height: r(102);
            padding-top: r(35);
            margin: 0 auto;
        }
        .ball {
            background: url(../img/6.png) no-repeat;
            background-size: 100%;
            width: r(554);
            height: r(370);
            top: r(560);
            left: r(60);
            position: absolute;
            #div1{
            position: absolute;
            left: 10px;
            top:10px;
            }
           .Christmas {
                margin: 0 auto;
                width: r(481);
                height: r(312);           
            }
        }
        .semi_circle {
            position: fixed;
            bottom: 0;
            left: r(150);
            width: r(305);
            z-index: 2;
            height: r(100);
            border-radius: 50%/100% 100% 0 0;
            background: #56984b;
        }
    }
}

.icon1_1 {
    width: r(34);
    height: r(11);
    margin: 0 auto;
}

.draw {
    color: white;
    text-align: center;
    font-size: r(36);
}

//.soccer_img {
//  width: r(30);
//  height: r(30);
//}
.p1_img{
     width: r(30);
    height: r(30);
    position: absolute;
    top: r(300);
    left: r(400);
}
.p2_img{
     width: r(45);
    height: r(45);
    position: absolute;
    top: r(500);
    left: r(100);
}
.p3_img{
    width: r(76);
    height: r(77);
    position: absolute;
    top: r(450);
    left: r(500);
}

